{% block sw_order_detail_details %}
<div class="sw-order-detail-details">

    {% block sw_order_detail_details_payment %}
    <sw-order-details-state-card
        v-if="transaction"
        position="transaction"
        :title="$tc('sw-order.detailsTab.labelTransactionCard')"
        :order="order"
        :entity="transaction"
        :state-label="$tc('sw-order.stateCard.headlineTransactionState')"
        :disabled="!acl.can('order.editor') || undefined"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        {% block sw_order_detail_details_payment_billing_address %}
        <sw-order-address-selection
            class="sw-order-detail-details__billing-address"
            type="billing"
            :address="billingAddress"
            :address-id="selectedBillingAddressId"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelBillingAddress')"
            @change-address="onChangeOrderAddress"
        />
        {% endblock %}

        {% block sw_order_detail_details_payment_method_select %}
        <sw-entity-single-select
            v-model:value="transaction.paymentMethodId"
            entity="payment_method"
            label-property="distinguishableName"
            disabled
            :criteria="paymentMethodCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelPaymentMethod')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderPaymentMethod')"
            show-clearable-button
        />
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    {% block sw_order_detail_details_shipping %}
    <sw-order-details-state-card
        v-if="delivery"
        position="delivery"
        :title="$tc('sw-order.detailsTab.labelDeliveryCard')"
        :order="order"
        :entity="delivery"
        :state-label="$tc('sw-order.stateCard.headlineDeliveryState')"
        :disabled="!acl.can('order.editor') || undefined"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        {% block sw_order_detail_details_shipping_address %}
        <sw-order-address-selection
            class="sw-order-detail-details__shipping-address"
            type="shipping"
            :address="shippingAddress"
            :address-id="selectedShippingAddressId"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelShippingAddress')"
            @change-address="onChangeOrderAddress"
        />
        {% endblock %}

        {% block sw_order_detail_details_shipping_method_select %}
        <sw-entity-single-select
            v-model:value="delivery.shippingMethodId"
            entity="shipping_method"
            disabled
            :criteria="salesChannelCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelShippingMethod')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderShippingMethod')"
            show-clearable-button
        />
        {% endblock %}

        {# @deprecated tag:v6.8.0 - Will be removed, use shipping cost in general view instead. #}
        {# file: src/Administration/Resources/app/administration/src/module/sw-order/view/sw-order-detail-general/sw-order-detail-general.html.twig #}
        {% block sw_order_detail_details_shipping_costs %}
        <mt-number-field
            v-if="!feature.isActive('v6.8.0.0')"
            v-model="shippingCosts"
            class="sw-order-detail-details__shipping-cost"
            :disabled="!acl.can('order.editor')"
            :step="1"
            :min="0"
            :label="$tc('sw-order.detailDeliveries.labelShippingCosts')"
        >
            <template #suffix>
                {{ order.currency.symbol }}
            </template>
        </mt-number-field>
        {% endblock %}

        {% block sw_order_detail_details_shipping_date %}
        <mt-datepicker
            v-model="delivery.shippingDateEarliest"
            disabled
            hide-hint
            :label="$tc('sw-order.detailDeliveries.labelDeliveryDate')"
        />
        {% endblock %}

        {% block sw_order_detail_details_shipping_tracking_codes %}
        <sw-multi-tag-select
            v-model:value="delivery.trackingCodes"
            class="sw-order-user-card__tracking-code-select"
            :disabled="!acl.can('order.editor') || undefined"
            :placeholder="$tc('sw-order.detailBase.placeholderTrackingCodeSelect')"
            :label="$tc('sw-order.detailBase.labelTrackingCodes')"
            :validate="validateTrackingCode"
            @update:value="saveAndReload"
        >
            <template #message-add-data>
                <span>{{ $tc('sw-order.detailBase.addTrackingCode') }}</span>
            </template>
            <template #message-enter-valid-data>
                <span>{{ $tc('sw-order.detailBase.enterValidTrackingCode') }}</span>
            </template>
        </sw-multi-tag-select>
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    {% block sw_order_detail_details_order %}
    <sw-order-details-state-card
        position="order"
        :title="$tc('sw-order.detailsTab.labelOrderCard')"
        :order="order"
        :entity="order"
        :disabled="!acl.can('order.editor') || undefined"
        :state-label="$tc('sw-order.stateCard.headlineOrderState')"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        {% block sw_order_detail_details_order_email %}

        <mt-text-field
            v-model="order.orderCustomer.email"
            class="sw-order-detail-details__email"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelEmail')"
            :placeholder="$tc('sw-order.createBase.detailsBody.placeholderEmail')"
            :error="orderOrderCustomerEmailError"
            required
        />
        {% endblock %}

        {% block sw_order_detail_details_order_phone_number %}

        <mt-text-field
            v-model="order.addresses.get(order.billingAddressId).phoneNumber"
            class="sw-order-detail-details__phone-number"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelPhoneNumber')"
            :placeholder="$tc('sw-order.createBase.detailsBody.placeholderPhoneNumber')"
        />
        {% endblock %}

        {% block sw_order_detail_details_order_sales_channel %}
        <sw-entity-single-select
            v-model:value="order.salesChannelId"
            entity="sales_channel"
            disabled
            :label="$tc('sw-order.createBase.detailsFooter.labelSalesChannel')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderSalesChannel')"
            show-clearable-button
        />
        {% endblock %}

        {% block sw_order_detail_details_order_language %}
        <sw-entity-single-select
            v-model:value="order.languageId"
            entity="language"
            disabled
            :criteria="salesChannelCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelOrderLanguage')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderOrderLanguage')"
            show-clearable-button
        />
        {% endblock %}

        {% block sw_order_detail_details_order_affiliate %}

        <mt-text-field
            v-model="order.affiliateCode"
            class="sw-order-detail-details__affiliate-code"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.detailBase.labelAffiliateCode')"
        />
        {% endblock %}

        {% block sw_order_detail_details_order_campaign %}

        <mt-text-field
            v-model="order.campaignCode"
            class="sw-order-detail-details__campaign-code"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.detailBase.labelCampaignCode')"
        />
        {% endblock %}

        {% block sw_order_detail_details_order_customer_comment %}
        <mt-textarea
            v-model="order.customerComment"
            class="sw-order-detail-details__customer-comment"
            :disabled="!acl.can('order.editor')"
            :label="$tc('sw-order.detailBase.labelCustomerComment')"
        >
            <template #hint>
                <div class="sw-order-detail-details__field-hint">
                    <mt-icon
                        size="12"
                        name="solid-info-circle"
                        class="sw-order-detail-details__field-hint__icon"
                    />
                    <p>{{ $tc('sw-order.detailBase.helpTextCustomerComment') }}</p>
                </div>
            </template>
        </mt-textarea>
        {% endblock %}

        {% block sw_order_detail_details_order_internal_comment %}
        <mt-textarea
            v-model="order.internalComment"
            class="sw-order-detail-details__internal-comment"
            :disabled="!acl.can('order.editor')"
            :label="$tc('sw-order.detailBase.labelInternalComment')"
        >
            <template #hint>
                <div class="sw-order-detail-details__field-hint">
                    <mt-icon
                        size="12"
                        name="solid-info-circle"
                        class="sw-order-detail-details__field-hint__icon"
                    />
                    <p>{{ $tc('sw-order.detailBase.helpTextInternalComment') }}</p>
                </div>
            </template>
        </mt-textarea>
        {% endblock %}

        <!-- @deprecated tag:v6.8.0 - Block will be removed -->
        {% block sw_order_detail_details_order_promotion %}
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    {% block sw_order_detail_details_custom_fields %}
    <sw-extension-component-section
        position-identifier="sw-order-detail-base-custom-fields__before"
    />

    <mt-card
        v-if="customFieldSets.length > 0"
        position-identifier="sw-order-detail-details-custom-fields"
        :title="$tc('sw-settings-custom-field.general.mainMenuItemGeneral')"
    >
        <sw-custom-field-set-renderer
            :entity="order"
            :disabled="!acl.can('order.editor')"
            :sets="customFieldSets"
        />
    </mt-card>

    <sw-extension-component-section
        position-identifier="sw-order-detail-base-custom-fields__after"
    />
    {% endblock %}
    {% block sw_order_detail_base_state_history_modal %}
    <sw-order-state-history-modal
        v-if="showStateHistoryModal"
        :order="order"
        @modal-close="showStateHistoryModal = false"
    />
    {% endblock %}
</div>
{% endblock %}
